<template>
	<view>
        <public-fixed-box top>
			<view class="header-container">
				<public-navbar :isBack="true">
					<view>支付密码</view>
				</public-navbar>
			</view>
		</public-fixed-box>
    <!-- #ifdef APP-PLUS -->
    <view style="height: 100rpx;"></view>
    <!-- #endif -->
        <view style="font-size: 40rpx; font-weight: bold; text-align: center; margin-top: 100rpx;">{{title}}</view>
        <view style="font-size: 28rpx; text-align: center; margin-top: 40rpx;">{{subTitle}}</view>
        <view class="code" style="margin-top: 10vh; display: flex; justify-content: center; align-items: center;">
            <view style="display: flex; align-items: center; justify-content: center;">
                <view v-for="(item, index) in 6" :key="index">{{ password[index] && '●' || '' }}</view>
            </view>
        </view>
        <view class="keyboard" style="display: flex; flex-direction: row; flex-wrap: wrap;">
            <button v-for="(item, index) in 9" :key="index" @click="key(index + 1)">
                <text>{{ index + 1 }}</text>
            </button>
            <button class="hide"></button>
            <button @click="key(0)">
                <text>0</text>
            </button>
            <button @click="del()">
                <image src="/static/icon/jam_delete.png" mode="aspectFill"></image>

            </button>
        </view>
    </view>
</template>

<script>
	import { userApi } from '@/common/user.js';
	export default {
		data() {
            return {
				isUserSetPwd: false,
				flag: false,
				confirmFlag: false,
				title: '设置支付密码',
				subTitle: '请设置支付密码，保障您的账户安全',
				oldPassword: '',
				newPassword: '',
				confirmPassword: '',
                password: ''
            }
        },
		onLoad(e) {
			let self = this;
			userApi.isSetPayPassword().then(res => {
				if (res == true) {
					self.isUserSetPwd = true;
					self.title = '验证支付密码';
					self.subTitle = '请验证原有的支付密码';
				} else {
					self.isUserSetPwd = false;
					self.title = '设置支付密码';
					self.subTitle = '请设置支付密码，保障您的账户安全';
				}
			});
		},
        methods: {
            key(key) {
				let self = this;
                if (this.password.length < 6) {
                    this.password += key
                    if (this.password.length === 6) {
						if (this.isUserSetPwd) {
							if (this.flag) {
								if (this.confirmFlag) {
									if (this.newPassword != this.password) {
										uni.showToast({
											title: '两次输入新的支付密码不一致',
											duration: 1000,
											icon: 'none'
										});
									} else {
										userApi.changePayPassword({oldPwd: this.oldPassword, newPwd: this.newPassword}).then(res => {
											uni.showToast({
												title: '支付密码修改成功',
												duration: 1000,
												icon: 'none'
											});
											uni.navigateBack();
										});
									}
								} else {
									this.confirmFlag = true;
									this.newPassword = this.password;
									this.password = "";
									self.title = '设置支付密码';
									self.subTitle = '请再次输入新的支付密码';
								}
							} else {
								this.oldPassword = this.password;
								userApi.verifyPayPassword({pwd: this.oldPassword}).then(res => {
									self.flag = true;
									self.title = '设置支付密码';
									self.subTitle = '请输入新的支付密码';
									self.password = "";
								});

							}
						} else {
							if (this.confirmFlag) {
								if (this.newPassword != this.password) {
									uni.showToast({
										title: '两次输入新的支付密码不一致',
										duration: 1000,
										icon: 'none'
									});
								} else {
									userApi.changePayPassword({oldPwd: this.oldPassword, newPwd: this.newPassword}).then(res => {
										uni.showToast({
											title: '支付密码修改成功',
											duration: 1000,
											icon: 'none'
										});
										uni.navigateBack();
									});
								}
							} else {
								this.confirmFlag = true;
								this.newPassword = this.password;
								this.password = "";
								self.title = '设置支付密码';
								self.subTitle = '请再次输入新的支付密码';
							}
						}
                    }
                }
            },
            del() {
                if (this.password.length > 0) {
                    this.password = this.password.substring(0, this.password.length - 1)
                }
            }
        }
	}
</script>

<style lang="scss" scoped>
    .password-set-page {
		width: 100vw;
		background-color: red;
    }
	.code {
		>view {
			border: 1px solid #DDDDDD;
			border-radius: 8rpx;
			overflow: hidden;
			view {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100rpx;
				height: 100rpx;
				background: #FAFAFA;
				font-size: 60rpx;
				&:not(:last-child) {
					border-right: 1px solid #DDDDDD;
				}
			}
		}
	}
	.keyboard {
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #EEEEEE;
		button {
			display: flex;
			align-items: center;
			justify-content: center;
			width: calc(100vw / 3 - 1px);
			background: #FFFFFF;
			border-radius: 0;
			margin-top: 1px;
			font-size: 50rpx;
			height: 120rpx;
			&.button-hover:not(.hide) {
				background: #EEEEEE;
			}
			image {
				width: 52rpx;
				height: 38rpx;
			}
		}
	}
</style>
